<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 前端如何拿到后端数据

    // 早的时候的方式，用XMLHttpRequest构造函数的方式去获取数据
    // const xhr2 = new XMLHttpRequest();
    // xhr2.open('GET', 'https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8');
    // xhr2.send();
    // xhr2.onload = function() {
    //   if (xhr2.status === 200) {
    //     console.log(JSON.parse(xhr2.responseText)); // 数据二
    //   } else {
    //     console.error('请求失败', xhr2.status);
    //   }
    // };



    // fetch，是html5提出的一种新的数据获取方案
    // fetch方法调用，直接返回一个promise实例
    // fetch("https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8")
    //   .then(response => {
    //     // response就是请求到的结果
    //     return response.json()
    //   })
    //   .then(res => {
    //     // 第一个.then的结果就可以给第二个.then使用
    //     console.log(res);
    //   })

    // fetch("https://cnodejs.org/api/v1/topics")
    //   .then(response => response.json())
    //   .then(res => console.log(res))

    // fetch("https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8")
    //   .then(response => response.json())
    //   .then(res => console.log(res))





    // 首先对fetch进行一个封装
    // 一般情况下，同一个项目，请求的后端接口都是同一个路径下的
    // 所以通常我们会把后端接口的地址的前面部分提取出来
    const base_url = "https://cnodejs.org/api/v1";
    const request = (url) => {
      // 封装fetch的时候，因为fetch本身返回的就是promise实例，所以不需要new Promise了，也不需要resolve了
      return fetch(base_url + url)
        .then(response => response.json())
        .then(res => {
          return res;
        })
    }
    // 1. 要求第一个请求结束再发第二个,用async
    // const getData = async () => {
    //   const res = await request("/topics");
    //   console.log(res);
    //   const res2 = await request("/topic/61f69e4aa08b39f75309c2a8");
    //   console.log(res2);
    // }
    // getData();



    // 2. 要求第一个请求结束，拿到请求到的数据的数组里面的第一项的id。再请求第二个接口
    // const getData = async () => {
    //   const res = await request("/topics");
    //   console.log(res);
    //   const id = res.data[0].id;
    //   const res2 = await request("/topic/" + id);
    //   console.log(res2);
    // }
    // getData();



    // 3. 单独的。这两个接口的数据要求一起拿到
    const getData = async () => {
      // const res = await request("/topics"); // 2s
      // const res2 = await request("/topic/61f69e4aa08b39f75309c2a8"); // 3s
      // console.log(res);
      // console.log(res2);

      // 并发请求，总时间一定比上面的方式快
      const [data1, data2] = await Promise.all([request("/topics"), request("/topic/61f69e4aa08b39f75309c2a8")]);
      console.log(data1);
      console.log(data2);
    }
    getData();


  </script>
</body>
</html>